<template>
  <div class='tableList'>
    <el-table :data="tableData" header-row-class-name='table-title' v-loading="loading" header-cell-class-name='table-head'>
      <el-table-column prop="name" label="服务编码">
      </el-table-column>
      <el-table-column prop="num1" label="服务名称">
      </el-table-column>
      <el-table-column prop="state" label="运行状态">
      	<template slot-scope="scope">
          <el-button v-if='scope.row.state == 1' type="success" round size='mini'>成功</el-button>
          <el-button v-else type="danger" round size='mini'>停止</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="num3" label="访问量">
      </el-table-column>
      <el-table-column prop="num2" label="响应时间（ms）">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination :current-page.sync="currentPage" background :page-size="pageSize" layout="total, prev, pager, next, slot, jumper" :total="pageNumber">
        <span class='pageSize'>
      		<el-select v-model="pageSize">
	            <el-option v-for='value in pageList' :label='value' :key='value' :value='value'></el-option>
	        </el-select>
	       <span>条/每页</span>
        </span>
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import { getList } from '@/api/taskFlow'
  export default {
    data() {
      return {
        pageList: [10, 20, 50, 100],
        pageSize: 10,
        currentPage: 1,
        pageNumber: 100,
        loading: false,
        tableData: [
          {
            name: 'JKUO-HGVSBA001',
            num1: '并发',
            num2: '100',
            num3: '21',
            num4: '00:25:36',
            num5: '4000/4000',
            state: '1'
          },
          {
            name: 'JKUO-HGVSBA001',
            num1: '并发',
            num2: '50',
            num3: '5',
            num4: '00:25:36',
            num5: '4000/4000',
            state: '2'
          },
          {
            name: 'JKUO-HGVSBA001',
            num1: '并发',
            num2: '20',
            num3: '8',
            num4: '00:25:36',
            num5: '4000/4000',
            state: '1'
          }
        ]
      }
    },
    props: {
      chacked: {
        type: Object,
        default: function() {
          return {
            name: '',
            num: ''
          }
        }
      }
    },
    created() {
      this.getList(this.searchData)
    },
    computed: {
      searchData() {
        const obj = {
          pageSize: this.pageSize,
          currentPag: this.currentPage
        }
        for (var item in this.chacked) {
          obj[item] = this.chacked[item]
        }
        return obj
      }
    },
    methods: {
      getList(params) {
        this.loading = true
        getList(params).then(response => {
          this.$message.success('请求成功')
          this.loading = false
          this.$nextTick(() => {})
        }).catch(response => {
          this.$message.error('请求出现未知错误')
          this.loading = false
        })
      },
      goLink(row) {
        this.$router.push('/monitorAssay/flowChart?name=' + row.name)
      }
    },
    watch: {
      searchData: {
        handler(val) {
          this.getList(val)
        },
        deep: true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">

</style>